import React, { Component } from "react";
import Footer from "./footer";
import Header from "./header";
class wa extends Component {
  constructor(props) {
    super(props);
    this.state = {
      wa_active: 1,
    };
  }
  addNav(e) {
    const index = e.currentTarget.getAttribute("data-index");
    console.log(index, e);
    this.setState({
      wa_active: Number(index),
    });
  }
  render() {
    const { wa_active } = this.state;
    return (
      <>
        <Header tit="挖矿" />
        <div className="wa_nav">
          <div
            data-index="1"
            onClick={(e) => this.addNav(e)}
            className={wa_active === 1 ? "wa_active" : ""}
          >
            <span>全部</span>
            <i></i>
          </div>
          <div
            data-index="2"
            onClick={(e) => this.addNav(e)}
            className={wa_active === 2 ? "wa_active" : ""}
          >
            <span>我的</span>
            <i></i>
          </div>
        </div>
        <ul
          className={
            wa_active === 1 ? "wa_active wa_all wa_ul" : "wa_all wa_ul"
          }
        >
          <li>
            <div className="li_bg"></div>
          </li>
          <li>
            <div className="li_bg"></div>
          </li>
          <li>
            <div className="li_bg"></div>
          </li>
          <li>
            <div className="li_bg"></div>
          </li>
        </ul>
        <ul
          className={
            wa_active === 2 ? "wa_active wa_user wa_ul" : "wa_user wa_ul"
          }
        ></ul>
        <Footer />
      </>
    );
  }
}

export default wa;
